<script setup>
import { ref, shallowRef, onBeforeUnmount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const editorRef = shallowRef()
const valueHtml = ref('<p>hello</p>')

const handleCreated = (editor) => {
	editorRef.value = editor
}

onBeforeUnmount(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})
// 工具栏配置
const toolbarConfig = {
	// 可以根据需要自定义工具栏
	excludeKeys: [
		'group-video', // 排除视频
		'fullScreen'   // 排除全屏
	]
}
// 编辑器配置 - 包含上传地址
const editorConfig = {
	placeholder: '请输入内容...',
	MENU_CONF: {
		// 图片上传配置
		uploadImage: {
			// 上传服务器地址
			server: '/v1/editor/image', // 你的图片上传接口
			// 表单字段名
			fieldName: 'file',
			// 最大文件大小 5M
			maxFileSize: 5 * 1024 * 1024,
			// 支持的文件类型
			allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],

			// 自定义上传参数
			meta: {
				// token: localStorage.getItem('token'), // 如果需要认证
				folder: 'editor' // 自定义参数
			},

			// 自定义请求头
			headers: {
				'Authorization': 'Bearer your-token', // 认证头
				'X-Requested-With': 'XMLHttpRequest'
			},

			// 超时时间
			timeout: 30 * 1000, // 30秒

			// 上传钩子函数
			onBeforeUpload(file) {
				console.log('即将上传文件:', file)
				// 可以在这里进行文件验证
				return file
			},

			onProgress(progress) {
				console.log('上传进度:', progress)
			},

			onSuccess(file, res) {
				console.log('上传成功', res)
				// 这里不需要返回东西
			},

			onFailed(file, res) {
				console.error('上传失败', res)
				alert(`上传失败: ${res.message || '未知错误'}`)
			},

			onError(file, err) {
				console.error('上传错误', err)
				alert('上传过程发生错误')
			},

			// 自定义上传方法（如果需要完全自定义）
			// customUpload(file, insertFn) {
			//   // 你的自定义上传逻辑
			//   // 上传成功后调用 insertFn(url)
			// }
		},

		// 如果需要视频上传
		uploadVideo: {
			server: '/api/upload/video',
			fieldName: 'file',
			maxFileSize: 50 * 1024 * 1024, // 50M
			allowedFileTypes: ['video/mp4', 'video/avi', 'video/mov'],
			headers: {
				'Authorization': 'Bearer your-token'
			}
		}
	}
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})
defineExpose({
	valueHtml
})
</script>

<template>
	<div style="border: 1px solid #ccc; margin-top: 10px">
		<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #ccc" />
		<Editor v-model="valueHtml" :defaultConfig="editorConfig" style="height: 400px; overflow-y: hidden"
			@onCreated="handleCreated" />
	</div>
</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>